<template>
    <div id="app" v-loading="loading">
        <div class="title">异常行为</div>
        <el-row class="tableBtnTop">
            <el-select 
                    v-model="searchType"
                    placeholder="请选择" class="filter"
                >
                    <el-option
                        v-for="(typeItem,typeIndex) of searchTypeList"
                        :key="typeItem.value"
                        :value="typeItem.value"
                        :label="typeItem.name"
                    ></el-option>
                </el-select>
            <div class="search">
                <el-input placeholder="请输入内容"
                    v-model="searchText"
                    @keyup.enter.native="searchWill"
                >
                    <i slot="prefix" class="el-input__icon el-icon-search"
                        style="cursor: pointer;"
                    ></i>
                </el-input>
            </div>
        </el-row>

        <el-table :data="tableData" border
            @filter-change="handleFilter"
            ref="filterTable"
        >
            <el-table-column prop="nick" label="昵称" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="userHead"
                        @click="$router.push(`/user/detail/${scope.row.user_id}`)"
                    >
                        <img :src="scope.row.avatar" class="square" />
                        {{
                            scope.row.nick_name
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="content" label="风控原因" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="userHead noHandle">
                        {{
                            scope.row.remark
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="time" label="最后风控时间" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div>
                        {{
                            countTrialDate(scope.row.time_created * 1000)
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="count" label="未处理条数" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="userHead noHandle">
                        {{
                            scope.row.abnormal_deal
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="cash" label="总提现" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div>
                        {{
                            priceFormat(scope.row.all_cash)
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="re" label="总充值" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div>
                        {{
                            priceFormat(scope.row.all_recharge)
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="处理状态" :show-overflow-tooltip="true"
                column-key="status"
                :filters="status"
            >
                <template slot-scope="scope">
                    <font class="red" v-if="scope.row.status == 0">未处理</font> 
                    <font class="green" v-if="scope.row.status !=0 ">已处理</font> 
                </template>
            </el-table-column>
            <el-table-column prop="btn" label="操作" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                <div class="tableBtn">
                    <a class="blue" v-if="scope.row.status==0" 
                        @click="checkAbl(scope.$index)"
                    >
                        立即处理
                    </a>
                    <template v-else>-</template>
                </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="paginationBlock">
            <el-pagination layout="prev, pager, next,total" 
                :total="listNumsTotal" 
                :page-size="10"
                :current-page.sync="curPage"
                @current-change="changePage"
            >
            </el-pagination>
        </div>
        <el-dialog title="异常处理" :visible.sync="arnShow" width="600px"
            @opened="popOpenDid"
        >
            <div class="arContent"
                ref="popScroll"
            >
                <p
                    v-for="(abItem,abIndex) of userAbNomalList"
                    :key="abIndex + 'abList'"
                >
                    <font class="red" v-if="abItem.status == 0">未处理</font> 
                    <font class="green" v-if="abItem.status !=0 ">已处理</font> 
                    - {{
                        countTrialDate(abItem.time_created * 1000)
                    }}：{{
                        abItem.remark
                    }}
                </p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="arnShow = false">取 消</el-button>
                <el-button type="primary" @click="postDisposeAbnormalApi"
                    :loading="disBtnLoad"
                >
                    标记处理
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import UserAbnormal from './index.js';
    export default UserAbnormal;
</script>
<style lang="scss" scoped>
    .title{
        margin-bottom:25px;
        font-size:21px;
        margin-top:65px;
    }
    .noHandle{
        cursor: auto;
    }
    .arContent{
        max-height:400px;
        font-size:15px;
        overflow-y:auto;
        p{
            line-height:30px;
            margin-bottom:10px;
        }
    }
</style>